<template>
	<view class="container">
		<view class="user-section">
			<view class="vip-card-box" style="background-image: url(/static/images/card_bg.png);background-size: 100% 100%;">
				<view class="cu-list grid col-2 no-border">
					<view class="cu-item margin-top" v-if="userinfo.is_invest" @click="navToUrl('/pages/wallet/bill')">
						<image class="icon_task_money" src="/static/images/icon_task_money.png"></image>
						<view class="text-white">账户余额({{ unit }})</view>
						<view class="text-lg text-white">{{ userinfo.money }}</view>
					</view>
					<view class="cu-item margin-top" @click="navToUrl('/pages/wallet/score')">
						<image class="icon_task_jifen" src="/static/images/icon_task_jifen.png"></image>
						<view class="text-white">我的积分(分)</view>
						<view class="text-lg text-white">{{ userinfo.jifen }}</view>
					</view>
				</view>
			</view>
			<view class="title_icon padding-lr padding-tb">
				<text class="text-lg">今日任务</text>
			</view>
			<view class="cu-card">
				<view class="cu-item" v-for="(item, index) in taskList" :key="index">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar lg" :style="'background-image: url('+weburl+item.imgpath+');background-color: #fff;'"></view>
							<view class="content">
								<view>
									<view class="text-bold">{{ item.title }}</view>
								</view>
								<view class="text-gray text-sm flex">
									<view class="text-sm text-orange">+{{ item.reward }} {{ item.reward_str }}</view>
								</view>
							</view>
							<view class="action">
								<view class="text-xs cu-btn bg-red text-white round sm" v-if="item.status == 1 && item.type == 'qiandao'" @click="doQiandao()">点击签到</view>
								<view class="text-xs cu-btn bg-red text-white round sm" v-else-if="item.status == 1" @click="navToUrl(item.url)">去 完 成</view>
								<view class="text-xs cu-btn bg-grey text-white round sm" v-else-if="item.status == 3">已 领 取</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-lg">
				<view class="text-gray text-sm">* 任务每日0点更新，如逾期未领取即算作废</view>
				<view class="text-gray text-sm">本活动解释权由{{ webtitle }}所有，一经发现违规刷新取积分取消任务资格。</view>
			</view>
			<tabBar :currentPage="currentPage"></tabBar>
		</view>

		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
    export default {
		components: {
			tabBar
		},
		data() {
			return {
				task_bg:'',
				avatar:'/static/icon_avatar.png',
				userinfo:[],
				taskList:[],
				currentPage:'/pages/tasks/index',
				ifOnShow:false,
				unit:''
			};
		},
		onHide(){
            this.ifOnShow=true
        },
		onShow(){
            if(this.ifOnShow){
                this.getData();
				this.getTaskList();
            }
        },
		onLoad: function (option) {
			this.helper.checkLogin();
			this.loadImg();
			this.getInfoSet();
			this.getData();
			this.getTaskList();
		},
		methods: {
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				this.task_bg = this.weburl+'/storage/upload/task_bg.png?k='+range;
				this.avatar = this.weburl+'/storage/upload/icon_avatar.png?k='+range;
			},
			getInfoSet:function(){
				//获取基础参数
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['key=unit','timestamp='+timestamp]);
				this.helper.req({
					api:"getInfoSet",
					timestamp:timestamp,
					data:{key:'unit'},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.unit =  res.data.data.value;
				})
			},
			getData:function(){
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					if(this.userinfo.avatar){
						this.avatar = this.weburl + this.userinfo.avatar;
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			getTaskList:function(){
				//获取基础参数
				uni.showLoading({
					title:"数据加载中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getTaskList",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.taskList = res.data.data.taskList;
					
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			doQiandao: function(e) {
				this.helper.checkLogin();
				var token = 'token';
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					token = info.token;
				}
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+token,'timestamp='+timestamp]);
				this.helper.req({
					api:"doQiandao",
					timestamp:timestamp,
					data:{token:token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.showModal({
						title: "提示",
						content: res.data.message,
						showCancel: false,
						confirmText: "确定",
						success:function(res){

						}
					})
					uni.hideLoading();
					setTimeout(() => {
						this.getTaskList();
					}, 300);
				})
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			}
		},
	};
</script>

<style lang="scss">
	page{
		background-color: #ffffff;
	}
	.icon_task_money{
		width: 72upx;
		height: 52upx;
		margin: 16upx auto;
	}
	.icon_task_jifen{
		width: 60upx;
		height: 60upx;
		margin: 10upx auto;
	}
	.vip-card-box {
		height: 260upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10
	}
	.vip-card-box .grid {
		background: none;
		margin: -20upx -24upx
	}
	.vip-card-box .cu-list.grid > .cu-item{
		background: none;
	}
	.cu-card > .cu-item{
		margin: 0 30upx;
	}
	.cu-list.menu-avatar > .cu-item > .cu-avatar{
		left: 10upx;
	}
	.cu-list.menu-avatar > .cu-item .content{
		left: 130upx;
	}
	.cu-list.menu-avatar > .cu-item .action{
		width: 120upx;
	}
</style>
